<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="行业" prop="industry">
      <el-input v-model="ruleForm.industry"></el-input>
    </el-form-item>
    <el-form-item label="行业图标：" prop="industryIcon">
      <el-upload
        action="http://192.168.31.200:8081/banner/upload"
        list-type="picture-card"
        v-model="ruleForm.industryIcon"
        :file-list="fileList"
        :limit="2"
        :on-success="uploadSuccess"
        :http-request="uploadChange"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      <el-button @click="onclick">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
  mounted(){
    // console.log(this.industry)
    this.fileList = [{url:this.industry.industryIcon}]
    this.ruleForm = this.industry
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      fileList: [],
      ruleForm: {
        industryIcon: "",
        industry: "",
      },
      rules: {
        industry: [{ required: true, message: "请输入行业", trigger: "blur" }],
        industryIcon: [
          { required: true, message: "请上传图标", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleRemove(file, fileList) {
      this.fileList = [];
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      // console.log(file);
    },
    onclick() {
      this.$router.replace({ name: "IndustryManagement" });
    },
    async submitForm(formName) {
      const valid = await this.$refs[formName].validate().catch((err) => {});
      if(!valid) return
      console.log(valid)
      const {meta:{status}} = await this.$http.getEditIndustry(this.ruleForm);
      // console.log(data)
      if(status != 200){
        this.$message.error('更新失败')
      }else{
        this.$message.success('更新成功')
      }
      this.$router.replace({ name: "IndustryManagement" });
    },
    async uploadChange(params) {
      const file = new FormData();
      file.append("file", params.file);
      const res = await this.$http.bannerUpload(file);
      return res;
    },
    uploadSuccess(response, file, fileList) {
      // this.fileList = [file]
      this.ruleForm.industryIcon = response;
      // console.log(response);
      this.fileList = [file]
    },
  },
  computed:{
    ...mapGetters(['industry','industryId'])
  }
};
</script>

<style scoped lang="less">
.el-input {
  width: 70%;
}
</style>